import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Descriptions, Table, Button, Space, Tag, message, Typography } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { getAssetDetail, AssetDetail } from '../../../services/assets';
import type { ColumnsType } from 'antd/es/table';
import './styles.css';

const { Title } = Typography;

const AssetsDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<AssetDetail | null>(null);

  // 获取资源详情
  const fetchAssetDetail = async () => {
    if (!id) return;
    try {
      setLoading(true);
      const response = await getAssetDetail(id);
      setData(response);
    } catch (error) {
      message.error('获取资源详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAssetDetail();
  }, [id]);

  // 字段列配置
  const columns: ColumnsType<AssetDetail['dataFields'][0]> = [
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      width: 200,
    },
    {
      title: '字段类型',
      dataIndex: 'fieldType',
      key: 'fieldType',
      width: 150,
    },
    {
      title: '是否必填',
      dataIndex: 'isRequired',
      key: 'isRequired',
      width: 100,
      render: (isRequired: boolean) => (
        <Tag color={isRequired ? 'red' : 'default'}>
          {isRequired ? '是' : '否'}
        </Tag>
      ),
    },
    {
      title: '字段描述',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  const handleBack = () => {
    navigate(-1);
  };

  if (loading || !data) {
    return <Card loading={true} />;
  }

  return (
    <div className="asset-detail-container">
      <Card bordered={false}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <Space>
            <Button icon={<LeftOutlined />} onClick={handleBack}>
              返回
            </Button>
            <Title level={4} style={{ margin: 0 }}>资源详情</Title>
          </Space>

          <Descriptions title="基本信息" bordered>
            <Descriptions.Item label="资源名称">{data.assetName}</Descriptions.Item>
            <Descriptions.Item label="资源编码">{data.assetCode}</Descriptions.Item>
            <Descriptions.Item label="资源类型">
              {data.assetType === 'API' ? 'API接口' :
               data.assetType === 'DATABASE' ? '数据库' :
               data.assetType === 'FILE' ? '文件' :
               data.assetType === 'STREAM' ? '流式数据' : data.assetType}
            </Descriptions.Item>
            <Descriptions.Item label="数据提供方">{data.provider}</Descriptions.Item>
            <Descriptions.Item label="更新频率">{data.updateFrequency}</Descriptions.Item>
            <Descriptions.Item label="数据量">{data.dataSize}</Descriptions.Item>
            <Descriptions.Item label="状态">
              <Tag color={
                data.status === 'ONLINE' ? 'success' :
                data.status === 'OFFLINE' ? 'default' :
                data.status === 'MAINTAINING' ? 'warning' : 'default'
              }>
                {data.status === 'ONLINE' ? '已上线' :
                 data.status === 'OFFLINE' ? '已下线' :
                 data.status === 'MAINTAINING' ? '维护中' : data.status}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">{data.createdAt}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{data.updatedAt}</Descriptions.Item>
          </Descriptions>

          <Card title="资源描述" bordered={false}>
            <div style={{ whiteSpace: 'pre-wrap' }}>{data.description}</div>
          </Card>

          <Card title="字段信息" bordered={false}>
            <Table
              columns={columns}
              dataSource={data.dataFields}
              rowKey="fieldName"
              pagination={false}
            />
          </Card>

          {data.documentation && (
            <Card title="使用文档" bordered={false}>
              <div style={{ whiteSpace: 'pre-wrap' }}>{data.documentation}</div>
            </Card>
          )}

          {data.attachments && data.attachments.length > 0 && (
            <Card title="附件信息" bordered={false}>
              <ul style={{ listStyle: 'none', padding: 0 }}>
                {data.attachments.map((attachment, index) => (
                  <li key={index}>
                    <a href={attachment.url} target="_blank" rel="noopener noreferrer">
                      {attachment.name}
                    </a>
                  </li>
                ))}
              </ul>
            </Card>
          )}

          {data.sampleData && (
            <Card title="示例数据" bordered={false}>
              <pre>{JSON.stringify(data.sampleData, null, 2)}</pre>
            </Card>
          )}
        </Space>
      </Card>
    </div>
  );
};

export default AssetsDetailPage; 